<template>
	<view class="page">
		<!-- 视频播放 start -->
		<view class="player">
			<!--controls 是否显示默认播放控件 poster 视频封面的图片网络资源地址，-->
			<video id="myTrailer" :src="trailerInfo.trailer" :poster="trailerInfo.poster" class="movie" controls></video>
		</view>
		<!-- 视频播放 end -->

		<!-- 影片基本信息 start 左侧图片 右侧数据-->
		<!-- 跳转到单独的页面 这时候旧页面隐藏 传递封面过去 可以操作下载图片 -->
		<navigator :url="'../cover/cover?cover=' + trailerInfo.cover">
			<image :src="trailerInfo.cover" class="cover"></image>
		</navigator>

		<view class="movie-desc">
			<!-- 详情内容区域 -->
			<view class="title">{{trailerInfo.name}}</view>
			<view class="basic-info">{{trailerInfo.basicInfo}}</view>
			<view class="basic-info">{{trailerInfo.originalName}}</view>
			<view class="basic-info">{{trailerInfo.totalTime}}</view>
			<view class="basic-info">{{trailerInfo.releaseDate}}</view>
			<!-- 评分 2个大盒子之后平分 -->
			<view class="score-block">
				<view class="big-score">
					<view class="score-words">综合评分：</view>
					<view class="movie-score">{{trailerInfo.score}}</view>
				</view>
				<view class="score-stars">
					<!-- 平分组件  <template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。推荐template-->

					<block v-if="trailerInfo.score >= 0">
						<trailerStars :innerScore="trailerInfo.score" showNum="0"></trailerStars>
					</block>
					<view class="prise-counts">
						{{trailerInfo.prisedCounts}} 人点赞
					</view>
				</view>
			</view>
		</view>
		<!-- 影片基本信息 end -->

		<!-- 剧情介绍 start -->
		<view class="plots-block">
			<view class="plots-title">剧情介绍</view>
			<view class="plots-desc">{{trailerInfo.plotDesc}}</view>
		</view>
		<!-- 剧情介绍 end -->
		<!-- 演职人员 start -->
		<view class="scroll-block">
			<view class="plots-title">演职人员</view>
			<!-- 使用滚动视图组件 x横向滚动 图片和演员   里面又分2个数组 一个是导演一个是演员-->
			<scroll-view scroll-x class="scroll-list">
				<!-- 导演 -->
				<view class="actor-wapper" v-for="(director,staffIndex) in directorArray">
					<image :src="director.photo" class="single-actor" mode="aspectFill" @click="lookStaffs" :data-staffIndex="staffIndex"></image>
					<view class="actor-name">{{director.name}}</view>
					<view class="actor-role">{{director.actName}}</view>
				</view>
				<!-- 演员 自定义的index 要加上导演的数组长度 这样index就不会从0开始了-->
				<view class="actor-wapper" v-for="(actor,actorIndex) in actorArray">
					<image :src="actor.photo" class="single-actor" mode="aspectFill" @click="lookStaffs" :data-staffIndex="actorIndex + directorArray.length"></image>
					<view class="actor-name">{{actor.name}}</view>
					<view class="actor-role">{{actor.actName}}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 演职人员 end -->
		<!-- 剧照 start  也是一个标题和 一个 scoll-view 滚动视图来实现x轴滚动 
		-->
		<view class="scroll-block">
			<view class="plots-title">剧照</view>
			<scroll-view scroll-x class="scroll-list">
				<image v-for="(img, imgIndex) in plotPicsArray" :src="img" class="plot-image" mode="aspectFill" @click="lookMe"
				 :data-imgIndex="imgIndex"></image>
			</scroll-view>
		</view>
		<!-- 剧照 end -->
	</view>
</template>

<script>
	// 导入星星组件
	import trailerStars from "../../components/trailerStars.vue";
	export default {
		data() {
			return {
				trailerInfo: {}, //获取预告片的详细信息
				plotPicsArray: [], // 剧照
				directorArray: [], // 导演列表
				actorArray: [] // 演员列表
			}
		},
		// 这三个是一个小bug
		// 页面初次渲染完成，获得视频上下文对象 点击图片的时候 不应该也播放视频这时候就需要获取上下文对象了
		onReady() {
			this.videoContext = uni.createVideoContext('myTrailer');
		},
		onHide() {
			// 页面被隐藏的时候，暂停播放 调用视频对象里的方法
			this.videoContext.pause();
		},
		onShow() {
			// 页面被再次显示的时候，可以继续播放  页面切换来回的时候 判断是否存在了 视频对象  存在就播放他 
			if (this.videoContext) {
				this.videoContext.play();
			}
		},
		// 页面加载就触发的回调钩子 通过判断获取点击的图片进入的详情页面id 根据id 查询对应的数据进行展示 也获取导演和演员的数据和剧照 
		onLoad(params) {
			var me = this;
			// 获取上一个页面传入的参数
			var trailerId = params.trailerId;

			// 通过api修改导航栏的属性 可以不通过pages.json配导航栏属性
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#000000"
			});

			// 获取预告片的详细信息
			var serverUrl = me.serverUrl;
			uni.request({
				url: serverUrl + '/search/trailer/' + trailerId,
				method: "POST",
				success: (res) => {
					// 获取真实数据之前，务必判断状态是否为200
					if (res.data.status == 200) {
						var trailerInfo = res.data.data;
						me.trailerInfo = trailerInfo;
						// 把剧照的字符串转换为json array 返回临时路径 要保存起来 图片保存的话
						var plotPicsArray = JSON.parse(trailerInfo.plotPics);
						me.plotPicsArray = plotPicsArray;
						// debugger;
					}
				}
			});
			// 获取导演
			uni.request({
				url: serverUrl + '/search/staff/' + trailerId + '/1',
				method: "POST",
				success: (res) => {
					// 获取真实数据之前，务必判断状态是否为200
					if (res.data.status == 200) {
						me.directorArray = res.data.data;
						// debugger;
					}
				}
			});

			// 获取获取演员
			uni.request({
				url: serverUrl + '/search/staff/' + trailerId + '/2',
				method: "POST",
				success: (res) => {
					// 获取真实数据之前，务必判断状态是否为200
					if (res.data.status == 200) {
						me.actorArray = res.data.data;
						// debugger;
					}
				}
			});
		},

		//实现分享功能
		// 此函数仅仅只支持在小程序端的分享，分享到微信群或者微信好友
		//小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数 和 onLoad 等生命周期函数同级 用户点击分享按钮的时候会调用 文档配置都有
		onShareAppMessage(res) {
			var me = this;
			return {
				title: me.trailerInfo.name, //标题
				path: '/pages/movie/movie?trailerId=' + me.trailerInfo.id //页面传递的id 这样就能进行电影详情页 分享点击后
			}
		},
		// 监听原生标题栏按钮点击事件 就是点击分享按钮后 触发的回调 点击按钮会得到index 分0123的传递下去  看文档page
		onNavigationBarButtonTap(e) {  //分享的前提要配置 appid 和sercver
			var index = e.index;
			// console.log(index);
			var me = this;
			//要分享的时候展示的信息 朋友圈
			var trailerInfo = me.trailerInfo; 
			var trailerId = trailerInfo.id;
			var trailerName = trailerInfo.name;
			var cover = trailerInfo.cover;
			var poster = trailerInfo.poster;

			// index 为0 则分享
			if (index == 0) {
				uni.share({
					provider: "weixin",  //分享服务提供商
					scene: "WXSenceTimeline", //分享到朋友圈
					type: 0, //分享形式，
					href: "http://www.imovietrailer.com/#/pages/movie/movie?trailerId=" + trailerId, //跳转链接 点击后跳转到电影详情页面
					title: "NEXT超英预告：《" + trailerName + "》",
					summary: "NEXT超英预告：《" + trailerName + "》",
					imageUrl: cover, //背景封面
					success: function(res) {
						console.log("success:" + JSON.stringify(res)); 
					}
				});
			}
		},
		methods: {
			//点击剧照 进行图片的预览效果 传递的indeex回来指定 预览是那样 而不是重复第一张
			lookMe(e) {
				var me = this;
				var imgIndex = e.currentTarget.dataset.imgindex;

				uni.previewImage({
					current: me.plotPicsArray[imgIndex], //current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。
					urls: me.plotPicsArray //需要预览的图片链接列表 就是前面获取的剧照数组
				})
			},
			// 绑定在导演和演员的剧照中的点击事件 预览 和传递index 演员的index 不是从0 开始的 而是加上导演的长度在进行传递回来的
			lookStaffs(e) {
				var me = this;
				var staffIndex = e.currentTarget.dataset.staffindex; //二者绑定的自定义属性一致

				// 拼接导演和演员的数组，成为一个新数组 data中获取 
				var directorArray = me.directorArray;
				var actorArray = me.actorArray;
				var newStaffArray = []; //concat 返回一个拼接好的数组方法用于连接两个或多个数组。 不会改变原数组
				newStaffArray = newStaffArray.concat(directorArray).concat(actorArray);

				//定义要展示的urls
				var urls = [];
				for (var i = 0; i < newStaffArray.length; i++) {
					var tempPhoto = newStaffArray[i].photo; //遍历数组中的每一项取出url列表push进去 合起来
					urls.push(tempPhoto);
				}
				//图片预览  
				uni.previewImage({
					current: urls[staffIndex], //加上索引就会调用显示对应的图片了
					urls: urls //用于进行预览的列表
				})
			}
		}
	}
</script>


<style>
	@import url("moive.css");
</style>
